<template>
	<div class="indexlayout-main-conent">
		<el-card shadow="never" class="cus-card">
			<template #header>
				<el-row>
					<el-col :span="4">
						<el-button type="primary" @click="() => setCreateFormVisible(true)">添加角色</el-button>
					</el-col>
					<el-col :span="4">
						<site-server :siteValue="selectSite" :onchange="changeSite"></site-server>
					</el-col>
				</el-row>
			</template>

			<el-table :data="list" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
				<el-table-column prop="Id" label="id" sortable />
				<el-table-column prop="RoleName" label="角色名称" sortable />
				<el-table-column prop="Description" label="角色说明"/>
				<el-table-column prop="InsertTime" label="添加时间" sortable />
				<el-table-column prop="RealName" label="管理员" sortable />
				<el-table-column label="操作" prop="action" width="160">
					<template #default="{row}">
						<el-button type="text" @click="() => permission(row.Id)">角色权限</el-button>
						<el-button type="text" @click="() => detailUpdateData(row)"
							:loading="detailUpdateLoading.includes(row.Id)">编辑</el-button>
						<el-button type="text" @click="() => deleteTableData(row.Id)"
							:loading="deleteLoading.includes(row.Id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<create-form :visible="createFormVisible" :onCancel="() => setCreateFormVisible(false)"
				:onSubmitLoading="createSubmitLoading" :onSubmit="createSubmit" />

			<update-form v-if="updateFormVisible===true" :visible="updateFormVisible" :values="updateData"
				:onCancel="() => updataFormCancel()" :onSubmitLoading="updateSubmitLoading" :onSubmit="updateSubmit" />

			<permission-form v-if="permissionFormVisible===true" :visible="permissionFormVisible" :roleId="roleId"
				:onCancel="() => permissionFormCancel()" />


		</el-card>
	</div>
</template>
<script lang="ts">
	import {
		computed,
		ComputedRef,
		defineComponent,
		onMounted,
		Ref,
		ref
	} from "vue";
	import { useTableStore } from './store'
	import {
		ElMessageBox,
		ElMessage
	} from "element-plus";
	import IconSvg from "@/components/IconSvg";
	import CreateForm from './components/CreateForm.vue';
	import UpdateForm from './components/UpdateForm.vue';
	import PermissionForm from '../module/components/PermissionForm.vue';
	import {
		TableListItem
	} from './data.d';
	
import { useUserStore } from '@/store/user';

	interface ListTablePageSetupData {
		list : ComputedRef<TableListItem[]>;
		loading : Ref<boolean>;
		getList : (current : number) => Promise<void>;
		createFormVisible : Ref<boolean>;
		setCreateFormVisible : (val : boolean) => void;
		createSubmitLoading : Ref<boolean>;
		createSubmit : (values : Omit<TableListItem, 'id'>, resetFields : () => void) => Promise<void>;
		detailUpdateLoading : Ref<number[]>;
		detailUpdateData : (row : TableListItem) => Promise<void>;
		updateData : Ref<TableListItem>;
		updateFormVisible : Ref<boolean>;
		updataFormCancel : () => void;
		updateSubmitLoading : Ref<boolean>;
		updateSubmit : (values : TableListItem, resetFields : () => void) => Promise<void>;
		deleteLoading : Ref<number[]>;
		deleteTableData : (id : number) => void;
		permissionFormVisible : Ref<boolean>;
		permissionFormCancel : () => void;
		roleId : Ref<number>;
		tabVal : Ref<string>;
		searchVal : Ref<string>;
	}

	export default defineComponent({
		name: 'ListTablePage',
		components: {
			IconSvg,
			CreateForm,
			UpdateForm,
			PermissionForm,
		},

		setup() : ListTablePageSetupData {
			const user = useUserStore();
			const site = computed(() => user.$state.user.site);
			const selectSite = ref(0)
			onMounted(() => {
				getList(site.value);
				selectSite.value=site.value
			})
			
			const tableStore = useTableStore();

			const list = computed<TableListItem[]>(() => tableStore.$state.list);
			
			// 获取数据
			const loading = ref<boolean>(true);
			const getList = async (site) : Promise<void> => {
				loading.value = true;
				await tableStore.queryTableData(site);
				loading.value = false;
			}


			// 新增弹框 - visible
			const createFormVisible = ref<boolean>(false);
			const setCreateFormVisible = (val : boolean) => {
				createFormVisible.value = val;
			};
			// 新增弹框 - 提交 loading
			const createSubmitLoading = ref<boolean>(false);
			// 新增弹框 - 提交
			const createSubmit = async (values : TableListItem, resetFields : () => void) => {
				createSubmitLoading.value = true;
				const res : boolean = await tableStore.createTableData(values);
				if (res === true) {
					resetFields();
					setCreateFormVisible(false);
					ElMessage.success('新增成功！');
					getList(selectSite.value);
				}
				createSubmitLoading.value = false;
			}


			// 编辑弹框 - visible
			const updateFormVisible = ref<boolean>(false);
			const setUpdateFormVisible = (val : boolean) => {
				updateFormVisible.value = val;
			}
			const updataFormCancel = () => {
				setUpdateFormVisible(false);
			}
			// 编辑弹框 - 提交 loading
			const updateSubmitLoading = ref<boolean>(false);
			// 编辑弹框 - 提交
			const updateSubmit = async (values : TableListItem, resetFields : () => void) => {
				updateSubmitLoading.value = true;
				const res : boolean = await tableStore.updateTableData(values);
				if (res === true) {
					updataFormCancel();
					ElMessage.success('编辑成功！');
					getList(selectSite.value);
				}
				updateSubmitLoading.value = false;
			}

			// 编辑弹框 data
			let updateData = ref<TableListItem>();
			const detailUpdateLoading = ref<number[]>([]);
			const detailUpdateData = (row : TableListItem) => {
				updateData.value = row
				setUpdateFormVisible(true);

			}


			// 删除 loading
			const deleteLoading = ref<number[]>([]);
			// 删除
			const deleteTableData = (id : number) => {

				ElMessageBox.confirm('确定删除吗？', '删除', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(async () => {
					deleteLoading.value = [id];
					const res : boolean = await tableStore.deleteTableData(id);
					if (res === true) {
						ElMessage.success('删除成功！');
						getList();
					}
					deleteLoading.value = [];
				}).catch((error : any) => {
					console.log(error)
				});

			}

			// 权限
			const roleId = ref(1)
			const permission = (id : number) => {
				setPermissionFormVisible(true)
				roleId.value = id;
			}
			const permissionFormVisible = ref<boolean>(false);
			const setPermissionFormVisible = (val : boolean) => {
				permissionFormVisible.value = val;
			}
			const permissionFormCancel = () => {
				setPermissionFormVisible(false);
			}
			const permissionTableData = (id : number) => {
				permissionTableData(id)
			}
			const tabVal = ref<string>('all');
			const searchVal = ref<string>('');
			const changeSite = (site : Number) => {
				console.log('site', site)
				getList(site)
			}


		

			return {
				list,
				loading,
				getList,
				createFormVisible,
				setCreateFormVisible,
				createSubmitLoading,
				createSubmit,
				detailUpdateLoading,
				detailUpdateData,
				updateData,
				updateFormVisible,
				updataFormCancel,
				updateSubmitLoading,
				updateSubmit,
				deleteLoading,
				deleteTableData,
				tabVal,
				searchVal,
				permissionFormVisible,
				permission,
				permissionFormCancel,
				roleId,
				changeSite
			}

		}
	})
</script>